<?php include('includes/code/common.php'); ?>
<!doctype html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Samples - Overlay</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="robots" content="index,follow"/>
    <meta http-equiv="expires" content="0"/>
    <link rel="stylesheet" type="text/css" href="includes/css/yui_3.0.0_reset-min.css" />
    <link href="includes/css/main.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/print.css" rel="stylesheet" type="text/css" media="print" />
    <link href="includes/css/template/sample.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/template/jqueryUI/smoothness/jquery-ui-1.8.15.custom.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="includes/javascript/jquery-1.6.1.min.js"></script>
    <script src="includes/javascript/template/jquery.blockUI.js" type="text/javascript"></script>
    <script src="includes/javascript/template/jquery-ui-1.8.15.custom.min.js" type="text/javascript"></script>
    <script src="includes/javascript/template/custom/tws_overlay.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function(){
        $("#defaultLong").click(function(){$.TWS_Overlay("show","loading TWS overlay sample. This is a very verbose message that is being displayed. Let us see how it wraps!"); setTimeout('$.TWS_Overlay("hide")',5000); return false; });
        $("#defaultShort").click(function(){$.TWS_Overlay("show","loading TWS overlay sample."); setTimeout('$.TWS_Overlay("hide")',5000); return false; });
        $("#customMessage").click(function(){$.TWS_Overlay("show",{message : "Loading with a custom message", timeout : 5000}); return false; });
        $("#hide").click(function(){$.TWS_Overlay("hide");return false;});
        $("#success").click(function(){$.TWS_Overlay("success",{message: "Great job! Your action was successful!", title : "Successful Action!!", label : "Well Done!", onclick : function(){alert("Some other action!"); $.TWS_Overlay("hide");}});return false;});
        $("#error").click(function(){$.TWS_Overlay("error",{message : "A grave and serious error has occurred! You might have to perform another action.", timeout : 5000});return false;});
        $("#warning").click(function(){$.TWS_Overlay("warning",{message : "This is a warning. You might want to rethink your action.", title : "Please read the following..."});return false;});
        $("#confirm").click(function(){$.TWS_Overlay("confirm", {message : "Is it ok to proceed? Are you really sure you want to do this?", buttons : {cancel : {label : "No!", onclick : function(){alert("I said No!");}}}});return false;});
        $("#side").click(function(){
          //$.TWS_Overlay("side",{message: "Please wait while the action completes"});
       $.TWS_Overlay("side",{
          timeout : 5000
            /*
            fadeIn: 700,
            fadeOut: 700,
            showOverlay: false,
            centerY: false,
            timeout : 5000,
            css: {
                width: '250px',
                top: '100px',
                left: '',
                right: '10px'
            }*/
        });
          return false;
        });
    
        
      });

     
      
    </script>
  </head>

  <?php
  //top navigation selected
  $topNavSelected = "samples";
  ?>

  <?php
  //right navigation selected
  $rightNavSelected = "overlay";
  ?>

  <body>

    <!-- Container -->
    <div id="container">

      <!-- Header -->
      <div id="header" title="Treadstone Web Services">
        <?php include('includes/headerContent.php') ?>

      </div>

      <div class="clear"></div>

      <!-- Body -->
      <div id="bodyContent">

        <!-- Breadcrumbs -->
        <div id="breadcrumbs">
          <ul>
            <li class="link"><a href="index.php" title="Home">Home</a></li>
            <li class="link"><a href="samples.php" title="Samples">Samples</a></li>
            <li>Overlay</li>
          </ul>
        </div>
        <!-- End Breadcrumbs -->

        <div id="content">

          <div class="sectionLeft">

            <h1 >Overlay</h1>
            <p>
              Use the jQuery Block Plugin
              <a href="http://jquery.malsup.com/block/">http://jquery.malsup.com/block/</a>
              <a href="http://www.ajaxload.info/">Spinner creation</a>
            </p>

            <ul>
              <!-- Loading -->
              <li><a href="#" id="defaultLong">Default loading - Long Message</a></li>
              <li><a href="#" id="defaultShort">Default loading - Short Message</a></li>
              <li><a href="#" id="customMessage">Custom loading message</a></li>

              <li><a href="#" id="hide">Hide Overlay</a></li>

              
              <li><a href="#" id="success">Show success message</a></li>
              <li><a href="#" id="error">Show error message</a></li>
              <li><a href="#" id="warning">Show warning message</a></li>
              <li><a href="#" id="confirm">Show confirmation message</a></li>
              <li><a href="#" id="side">Show side message</a></li>
            </ul>

          </div>
          <!--   end #sectionLeft-->

        <!-- Right Navigation -->
        <div id="sidebar">
          <?php include('includes/rightNavSamples.php') ?>
        </div>
        <!-- end Right Navigation -->

        </div>
        <!-- end #content -->




      </div>
      <!-- end #bodyContent -->
      <!-- End Body -->

      <!-- Footer -->
      <div id="footer">
        <?php include('includes/footer.php') ?>
      </div>
      <!-- End Footer -->
    </div>
    <!-- End Container -->
  </body>
</html>
